<template>
  <view :data-theme="globPrimary">
    <exam-navbar-category @change="handleEaxmChange" :categoryId="categoryId" :title="title"></exam-navbar-category>
    <mescroll-body
      ref="mescrollRef"
      :height="mescrollHeight"
      :down="downOption"
      :up="upOption"
      @init="mescrollInit"
      @down="downCallback"
      @up="getRollupList"
    >
      <view class="rollup-item" v-for="item in rollupList" :key="item.id">
        <view class="u-flex u-line-1">
          <view class="bag" v-if="item.has_bought == 1 || item.user_price == 0">
            <u-image
              width="72"
              height="32"
              v-if="item.has_bought == 1"
              src="@/static/images/yigouamai.png"
            ></u-image>
            <u-image
              width="72"
              height="32"
              v-if="item.user_price == 0"
              src="@/pageFound/static/images/free.png"
            >
            </u-image>
          </view>
          <view class="title u-line-1" @click="onDetails(item.id, item.first_paper_id)">{{
            item.title
          }}</view>
        </view>
        <view
          class="content u-line-3"
          @click="onDetails(item.id, item.first_paper_id)"
          v-if="!$u.test.empty(item.intro)"
          >{{ item.intro }}</view
        >
        <view class="u-flex u-row-between bottom">
          <view class="u-flex">
            <view class="count">{{ item.paper_count }}套</view>
            <u-line direction="col" length="16rpx" color="#E4E7ED" margin="0 16rpx"></u-line>
            <view class="count">{{ item.practice_count }}人已练习</view>
          </view>
          <edu-button
            type="primary"
            size="medium"
            shape="circle"
            @click="onBuy(item.id)"
            v-if="item.user_price > 0 && item.has_bought == 0"
            >{{ item.user_price | formatCurrency(null, 0) }} | 购买</edu-button
          >
          <edu-button
            type="primary"
            size="medium"
            shape="circle"
            @click="onAnswer(item.id, item.first_paper_id)"
            v-else
            >开始答题</edu-button
          >
        </view>
      </view>
    </mescroll-body>

    <edu-user-coupon></edu-user-coupon>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
import examNavbarCategory from '../components/exam-navbar-category.vue'
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'
export default {
  mixins: [MescrollMixin],
  components: {
    examNavbarCategory,
  },
  data() {
    return {
      downOption: { auto: false },
      upOption: { auto: false },
      title: '', // 分类id
      categoryId: 0, // 分类id
      moduleId: 0, // 板块id
      rollupList: [], // 列表
      moduleTitle: '', // 模块标题
    }
  },
  computed: {
    ...mapGetters({
      globPrimary: 'designSetting/getGlobTheme',
      globPrimaryColor: 'designSetting/getGlobThemeColor',
      globNavbarHeight: 'projectSetting/globNavbarHeight',
      globStatusBarHeight: 'projectSetting/globStatusBarHeight',
    }),
    mescrollHeight() {
      let windowHeight = this.$u.sys().windowHeight
      return windowHeight - this.globNavbarHeight - this.globStatusBarHeight + 'px'
    },
  },
  // 监听页面返回
  onBackPress(options) {
    if (options.from === 'navigateBack') {
      return false
    }
    uni.$u.route({ type: 'tab', url: 'pages/exam/index' })
    return true
  },
  onLoad(option) {
    this.moduleId = option.id
    this.categoryId = option.category_id
    this.title = option.title
  },
  onShow() {
    if (this.categoryId && this.mescroll) {
      this.mescroll.resetUpScroll()
    }
  },
  methods: {
    getRollupList(page) {
      this.$edu.api
        .getRollupList({
          category: this.categoryId,
          module_id: this.moduleId,
          page: page.num,
          count: page.size,
        })
        .then((res) => {
          const { data } = res
          let list = data.data
          this.mescroll.endSuccess(list.length)
          if (page.num == 1) this.rollupList = []
          this.rollupList = this.rollupList.concat(list)
        })
    },
    handleEaxmChange(id) {
      this.categoryId = id
      this.mescroll.resetUpScroll()
    },
    // 购买
    onBuy(id) {
      this.$edu.judgeLogin(() => {
        this.$u.route('pageFound/exam/pay', {
          id: id,
          key: 'rollup',
          moduleId: this.moduleId,
          title: this.moduleTitle,
        })
      })
    },
    // 答题
    onAnswer(id, paper_id) {
      this.$edu.judgeLogin(() => {
        this.$u.route('/pageFound/exam/rollup/topic', {
          id: id,
          paper_id: paper_id,
        })
      })
    },
    onDetails(id, paper_id) {
      this.$u.route('/pageFound/exam/rollup/details', {
        id: id,
        paper_id: paper_id,
        title: this.moduleTitle,
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.rollup-item {
  margin: 20rpx 30rpx 0;
  padding: 30rpx 24rpx;
  background-color: #ffffff;
  border-radius: 8rpx;
  .bag {
    margin-right: 10rpx;
  }
  .title {
    font-size: 30rpx;
    font-weight: 500;
    color: #303133;
    font-weight: bold;
  }
  .content {
    margin-top: 12rpx;
    font-size: 24rpx;
    color: #909399;
    line-height: 36rpx;
  }
  .bottom {
    margin-top: 12rpx;
  }
  .count {
    font-size: 24rpx;
    color: #888888;
  }
  ::v-deep .edu-btn {
    height: 56rpx;
    min-width: 188rpx;
    line-height: 56rpx;
    padding: 0 20rpx;
    margin-right: 0;
  }
}
</style>
